<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例</title>

</head>
<body>

    <!-- Vue 事件处理 v-on,在事件绑定上,类似原生 JavaScript 的 onclick 写法,在 HTML 元素上进行监听 -->
    <div id="app1">

        点击次数: {{ counter }}

        <!-- @click == v-on:click, @ 是一个语法糖-->
        <button @click="counter++"> +1 </button>

        <!-- @click 的表达式可以直接使用 JavaScript 语句,也可以是一个在 Vue 实例中的 methods 选项内的函数名 -->
        <button @click="handleAdd(1)"> +1 </button>
        <button @click="handleAdd(10)"> +10 </button>


        <!-- Vue 提供了一个特殊变量 $event, 用于访问原生 DOM 事件 -->
        <a href="http://www.apple.com" @click="handleClick('禁止打开', $event)">打开链接</a>

    </div>

    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>

        var app1 = new Vue({
            el: "#app1",
            data: {
                counter: 0
            },
            methods:{
                handleAdd: function (count) {
                    count = count || 1;
                    this.counter += count;
                },

                handleClick: function (message, event) {
                    event.preventDefault();     // 不要执行与事件关联的默认动作（如果存在这样的动作）
                    window.alert(message);
                }
            }
        });


    </script>

</body>
</html>